<html>
<head>
    <meta charset="utf-8">
    <title>柱状图</title>
    <!-- 引入 echarts.js -->
    <script src="./echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 700px;height:420px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));

        option = {
             tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['最高气温', '最低气温']
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: {readOnly: false},
                    magicType: {type: ['line', 'bar']},
                }
            },
            xAxis: {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: "最高气温",
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'bar'
            },
            {
                name: "最低气温",
                data: [420, 732, 601, 734, 1390, 1530, 1120],
                type: 'bar'
            }]
        };

        myChart.setOption(option);
    </script>
</body>
</html>
